<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 5px;
        height:5px;
      }
      .boss {
        width: 100%;
      }
      .top {
        height: 40%;
      }
      input::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 0;
        padding-left: calc(100% - 24px);
        padding-right: 8px;
      }
      /* 日期标签定宽 
       将日期图标收回矿中*/
      input {
        position: relative;
        width: 140px;
      }

      /* 日期标签 默认不显示 年月日 
    此时日期框不可用*/
      input::-webkit-datetime-edit {
        display: none;
      }

      /* 日期标签 显示 placeholder 
      添加一个默认值让日期框可选*/
      input:empty:before {
        content: attr(placeholder);
      }
    </style>
  </head>
  <body>
    <form>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>应聘岗位</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <!--  -->
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>填表日期</text>
        </div>
        <input
          type="date"
          id="date"
          class="show_placeholder"
          placeholder="请选择日期"
          onchange="changeDate(this.id)"
        />
      </div>
      <!--  -->
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>姓名</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>性别</text>
        </div>
        <select name="sex" class="sex" style="width: 100%">
          <option value="" selected>请选择</option>
          <option value="1" >男</option>
          <option value="2">女</option>
        </select>
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>出生日期</text>
        </div>
        <input
          type="date"
          id="date"
          class="show_placeholder"
          placeholder="请选择日期"
          onchange="changeDate(this.id)"
        />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>民族</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>政治面貌</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>婚否</text>
        </div>
        <select name="marry" class="marry" style="width: 100%">
          <option value="" selected>请选择</option>
          <option value="1" >已婚</option>
          <option value="2">未婚</option>
        </select>
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>健康状况</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>籍贯（省、市）</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>联系方式</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>电子邮箱</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>学历</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>现居地</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>目前是否在职</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>预计到岗时间</text>
        </div>
        <input
          type="date"
          id="date"
          class="show_placeholder"
          placeholder="请选择日期"
          onchange="changeDate(this.id)"
        />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>期望薪资</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>外语水平</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>计算机水平</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>教育经历（请至少完整填写一行）</text>
        </div>
        
      </div>
      <table border="1">
        <tr>
            <th>时间</th>
            <th>毕业院校</th>
            <th>专业</th>
            <th>详细情况</th>
        </tr>
        <tr>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
        </tr>
        <tr>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
        </tr>
        <tr>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
            <td style="height:10px ;"><input type="text"></td>
        </tr>
    </table>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>工作经历（请至少完整填写一行，没有则写无）</text>
        </div>
        <table border="1">
            <tr>
                <th>时间</th>
                <th>公司名称</th>
                <th>职务</th>
                <th>职责</th>
            </tr>
            <tr>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
            </tr>
            <tr>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
            </tr>
            <tr>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
                <td style="height:10px ;"><input type="text"></td>
            </tr>
        </table>
      </div>
      <div class="boss">
        <div class="top">
          <text>个人荣誉</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <text>兴趣特长</text>
        </div>
        <input style="height: 50%; width: 100%" type="text" placeholder="请输入" />
      </div>
      <div class="boss">
        <div class="top">
          <img src="./images/星号.png" />
          <text>自我评价</text>
        </div>
        <textarea style="width: 100%;" cols="30" rows="10" placeholder="请输入"></textarea>
      </div>

      <button>提交</button>
    </form>
    <span id="result"></span>
    <script>
      function changeDate(idval) {
        var dom = document.getElementById(idval);
        var value = dom.value;
        if (value != null || value != "") {
          dom.setAttribute("placeholder", value);
        }
      }
      $('#date').change(function(){
                  if(!$(this).val()){
                          $(this).addClass('show_placeholder');
                  }else{
                          $(this).removeClass('show_placeholder');
                  }
          });
    </script>
  </body>
</html>
